<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ type == 1 ? '用户合并' : '账号转移' }}</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>{{ type == 1 ? '旧用户' : '被转移账号' }}</span>
          <div :class="{'error_border':tip_num===1}">
            <!--            <el-select filterable placeholder="请选择旧用户" v-model="userOne" value-key="id" v-if="type==1">-->
            <!--              <el-option-->
            <!--                :key="item.id"-->
            <!--                :label="item.remark ? item.wxName + ' ' + '(' + item.remark + ')' : item.wxName"-->
            <!--                :value="item.id"-->
            <!--                v-for="(item,index) in oldMergeOptions">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
            <!--            <el-select filterable placeholder="请选择被转移账号" v-model="userOne" value-key="id" v-if="type==2">-->
            <!--              <el-option-->
            <!--                :key="item.id"-->
            <!--                :label="item.remark ? item.wxName + ' ' + '(' + item.remark + ')' : item.wxName"-->
            <!--                :value="item.id"-->
            <!--                v-for="(item,index) in userList">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
            <userSelect @listenToUser="getUserOneId" :uId="userOne" hasOpenId="0" text="请选择旧用户" v-if="type==1"/>
            <userSelect @listenToUser="getUserOneId" :uId="userOne" text="请选择被转移账号" v-else/>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>{{ type == 1 ? '新用户' : '目标账号' }}</span>
          <div :class="{'error_border':tip_num===1}">
            <!--              <el-select filterable placeholder="请选择新用户" v-model="userTwo" value-key="id" v-if="type==1">-->
            <!--                <el-option-->
            <!--                  :key="item.id"-->
            <!--                  :label="item.remark ? item.wxName + ' ' + '(' + item.remark + ')' : item.wxName"-->
            <!--                  :value="item.id"-->
            <!--                  v-for="(item,index) in newMergeOptions">-->
            <!--                </el-option>-->
            <!--              </el-select>-->
            <!--            </div>-->
            <!--            <div :class="{'error_border':tip_num===1}" v-if="type==2">-->
            <!--              <el-select filterable placeholder="请选择目标账号" v-model="userTwo" value-key="id" v-if="type==2">-->
            <!--                <el-option-->
            <!--                  :key="item.id"-->
            <!--                  :label="item.remark ? item.wxName + ' ' + '(' + item.remark + ')' : item.wxName"-->
            <!--                  :value="item.id"-->
            <!--                  v-for="(item,index) in userList">-->
            <!--                </el-option>-->
            <!--              </el-select>-->
            <userSelect @listenToUser="getUserTwoId" :uId="userTwo" hasOpenId="1" text="请选择新用户" v-if="type==1"/>
            <userSelect @listenToUser="getUserTwoId" :uId="userTwo" hasOpenId="1" text="请选择目标账号" v-else/>
          </div>
        </div>
        <p class="error_line">{{ tips }}</p>

      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirm">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {mergeUser, transferAccount, userList} from "@/api/data/user";
import userSelect from '../../../components/user/index'

export default {
  components: {
    userSelect
  },
  props: ['type'],
  data() {
    return {
      oldMergeOptions: [],
      newMergeOptions: [],
      loading: false,
      userOne: '',
      userTwo: '',
      userList: [],
      tip_num: '',
      tips: '',
    }
  },
  mounted() {
    // this.getUserList();
  },
  methods: {
    getUserList() {
      if (this.type == 1) {
        this.loading = true;
        userList({hasOpenId: 0}).then(res => {
          this.oldMergeOptions = res ? res : [];
          this.loading = false;
        })
        userList({hasOpenId: 1}).then(res => {
          this.newMergeOptions = res ? res : [];
          this.loading = false;
        })
      } else {
        userList().then(res => {
          this.userList = res ? res : [];
          this.loading = false;
        })
      }

    },


    getUserOneId(e) {
      this.userOne = e;
    },

    getUserTwoId(e) {
      this.userTwo = e;
    },

    //确定
    confirm() {
      if (this.userOne === '' || this.userTwo === '') {
        this.tip_num = 1;
        this.tips = '请选择用户!';
      } else if (this.userOne === this.userTwo) {
        this.tip_num = 1;
        if (this.type == 1) {
          this.tips = '合并用户不能相同!';
        } else {
          this.tips = '转移用户不能相同!';
        }
      } else {
        this.tip_num = '';
        this.tips = '';
        this.$confirm('确定'+(this.type == 1?'合并':'转移')+'用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sendInfo();
        }).catch(() => { })
      }
    },
    sendInfo() {
      if (this.type == 1) {
        let queryParams = {
          oldUserId: this.userOne,
          newUserId: this.userTwo
        };
        mergeUser(queryParams).then(res => {
          this.closePopup(true);
          this.$message.success({
            message: '合并成功！',
            duration: 1500
          });
        }).catch((e) => {
          this.loading = false;
        })
      } else {
        let queryParams = {
          userId: this.userOne,
          targetUserId: this.userTwo
        };
        transferAccount(queryParams).then(res => {
          this.closePopup(true);
          this.$message.success({
            message: '转移成功！',
            duration: 1500
          });
        }).catch((e) => {
          this.loading = false;
        })
      }

    },
    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>

</style>
